import React from 'react';

export default class name_fei extends React.Component{
  constructor(props){
    super(props);
    this.state={
      username:'',
      checked:true,
      gender:'woman'
    }
  }
  handleChange(event){
     var newState={}
    //  这里全部用了name的属性，技术胖在事件调用的时候，没有用bind(this)方法，但是在这里确不行
      newState[event.target.name]=event.target.name=='checked'?event.target.checked:event.target.value;

     this.setState(
       newState
     )
     console.log(newState)
  }
  submitHandler(e){
    e.preventDefault();
    var is = this.state.checked?'是':'不是';
   var gender= this.state.gender == "man" ? "帅哥":"美女";
   alert(this.state.username+ is + gender +'.' );
    console.log(123);
  }
  render(){
    return(
      <div>
          name组件<br/>
          <from onSubmit={this.submitHandler}>
            <label htmlFor="username">请输入姓名</label>
            <input type='text' name='username' value={this.state.username} onChange={this.handleChange.bind(this)} id='username'/><br/>

            <label htmlFor="checkbox">是或否:</label>
            <input type='checkbox' value='是否' checked={this.state.checked} onChange={this.handleChange.bind(this)} name='checkbox'  id='checkbox'/><br/>

            <label >请选择:</label>
            <select name='gender' value={this.state.gender} onChange={this.handleChange.bind(this)}>
              <option value='man'>帅哥</option>
              <option value='woman'>美女</option>
            </select><br/>

            <button type='submit' onClick={this.submitHandler.bind(this)}>提交</button>
          </from>
      </div>
    )
  }
}
